import React from 'react';
import {render} from 'react-dom';

import {HashRouter as Router, Redirect, Route, Switch} from 'react-router-dom'
import {Provider} from 'mobx-react';
import {asyncComponent} from 'react-async-component';
import {Tools} from 'weaver-mobile';
import {FloatingTouch} from 'weaver-mobile-page';

import allStore from './stores';
import './style'

const coms = {
  taskHome: asyncComponent({
    resolve: () => import('./components/task')
  }),
  goalHome: asyncComponent({
    resolve: () => import('./components/goal')
  }),
    performanceHome: asyncComponent({
    resolve: () => import('./components/performance')
  }),
  planHome: asyncComponent({
    resolve: () => import('./components/plan')
  }),
}

class Root extends React.Component {

  constructor(props) {
    super(props);
  }
  
  onHomePageClick() {
    window.location.href = '/#/';
  }
	
  render() {
		return (
      <Provider {...allStore}>
          <Router>
            <FloatingTouch onClick={() => this.onHomePageClick()}>
              <Route name='home' path='/' render={() => {
                  return (
                        <Switch>
                          <Route name='goalHome' breadcrumbName='目标' path='/goalHome' component={coms.goalHome} />
                          <Route name='taskHome' breadcrumbName='任务' path='/taskHome' component={coms.taskHome} />
                          <Route name='performance' breadcrumbName='绩效' path='/performance' component={coms.performanceHome} />
                          <Route name='planHome' breadcrumbName='报告' path='/planHome' component={coms.planHome} />
                          <Redirect exact path="/" to={{pathname: '/performance'}} />					  
       
                        </Switch>
                  )
              }}/>
            </FloatingTouch>
          </Router>
      </Provider>
    );
  }
}

Tools.getLocaleLabel('workrelate', () => {
  render(<Root />, document.getElementById('root'));
});